<template>
    <div>
        <!-- 顶部按钮  -->
        <el-row :gutter="20" type="flex" justify="end" align="middle" style="text-align: right">
<!--            <el-col :span="8">-->
<!--                <el-checkbox v-model="checked">显示库存为0的仓库</el-checkbox>-->
<!--            </el-col>-->
            <el-col :span="3">
                <el-button type="primary" @click="add">新建仓库</el-button>
            </el-col>
        </el-row>
<!--        <el-select-->
<!--                v-model="goodsValue"-->
<!--                clearable-->
<!--                filterable-->
<!--                remote-->
<!--                reserve-keyword-->
<!--                placeholder="请输入关键词"-->
<!--                :remote-method="goodsRemoteMethod"-->
<!--                @change="goodsChange"-->
<!--                :loading="goodsLoading">-->
<!--            <el-option-->
<!--                    v-for="item in goodsOptions"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--            </el-option>-->
<!--        </el-select>-->
        <!-- 详情说明  -->
        <div class="info">
            <p>以门店命名的仓库，是随着门店的新增，自动产生的默认仓库，无法删除</p>
            <p>除了系统仓库外，可额外创建其他仓库管理商品库存</p>
        </div>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="仓库名称" prop="name"></el-table-column>
            <el-table-column label="仓库类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type === 1">中心仓库</span>
                    <span v-else>自定义</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEnter(scope.$index, scope.row)">管理商品</el-button>
<!--                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total"></Pagination>

        <!-- 新建仓库  -->
        <el-dialog
                :visible.sync="warehouseDialog"
                width="50%"
                @close="warehouseDialogClose">
            <div slot="title" class="header-title">
                <p class="title-name">新建仓库</p>
                <p class="title-info">独立于中心仓库的特殊仓库</p>
            </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
                <el-form-item label="仓库名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入仓库名称"  style="width: 304px"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="type" style="display: flex;align-items: center">
                    <el-radio v-model="addForm.type" :label="1">中心仓库</el-radio>
                    <el-radio v-model="addForm.type" :label="2">自定义仓库</el-radio>
                </el-form-item>
                <el-form-item label="管理员" prop="uid">
                    <el-select v-model="addForm.uid" clearable placeholder="请选择管理员"  style="width: 304px">
                        <el-option
                                v-for="item in adminList"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addForm.remark" style="width: 304px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="warehouseDialogClose">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑仓库  -->
        <el-dialog
                :visible.sync="editWarehouseDialog"
                width="50%"
                @close="editWarehouseDialogClose">
            <div slot="title" class="header-title">
                <p class="title-name">新建仓库</p>
                <p class="title-info">独立于中心仓库的特殊仓库</p>
            </div>
            <el-form :model="editForm" :rules="addRules" ref="editForm" label-width="100px">
                <el-form-item label="仓库名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入仓库名称"  style="width: 304px"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="type" style="display: flex;align-items: center">
                    <el-radio v-model="editForm.type" :label="1">中心仓库</el-radio>
                    <el-radio v-model="editForm.type" :label="2">自定义仓库</el-radio>
                </el-form-item>
                <el-form-item label="管理员" prop="uid">
                    <el-select v-model="editForm.uid" clearable placeholder="请选择管理员"  style="width: 304px">
                        <el-option
                                v-for="item in adminList"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="editForm.remark" style="width: 304px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editWarehouseDialogClose">取 消</el-button>
                <el-button type="primary" @click="editSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { getMerchList, getStoreList, getAdminList } from '../../api/publicApi'
    import { warehouseList, addWarehouse, findWarehouse, editWarehouse, giftList } from '../../api/warehouseApi'
    import Pagination from '../../components/pagination'
    export default {
        name: "warehouse",
        data () {
            return {
                goodsOptions: [],
                goodsValue: '',
                goodsList: [],
                goodsLoading: false,

                checked: true,
                tableData: [],
                loading: true,
                total: 0,
                warehouseDialog: false,
                addForm: {
                    name: '',
                    type: 1,
                    uid: '',
                    remark: ''
                },
                addRules: {
                    name: [
                        { required: true, message: '请输入仓库名称', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请选择商品分类', trigger: 'change' },
                    ],
                    uid: [
                        { required: true, message: '请选择管理员', trigger: 'change' },
                    ]
                },
                areaList: [],
                storeList: [],
                page: 1,
                editWarehouseDialog: false,
                editForm: {},
                adminList: []
            }
        },
        created() {
            this._warehouseList()
            // this._getMerchList()
            // this._getStoreList()

        },
        methods: {
            async goodsRemoteMethod(query) {
                if (query !== '') {
                    this.goodsLoading = true
                    const res = await giftList({name: query})
                    this.goodsList = res.data.list.map(item => {
                        return {label: item.name, value: item.id}
                    })
                    setTimeout(() => {
                        this.goodsLoading = false
                        this.goodsOptions = this.goodsList.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                        })
                    }, 200)
                } else {
                    this.goodsOptions = []
                }
            },
            goodsChange(val) {
                console.log(val)
            },
            // async _giftList(val) {
            //     const res = await giftList({name: val})
            //     console.log(res)
            //     this.list = res.data.list.map(item => {
            //         return {label: item.name, value: item.id}
            //     })
            // },

            async _getAdminList() {
                let data = {status: 1}
                const res = await getAdminList(data)
                console.log(res)
                this.adminList = res.data.user
            },
            async _warehouseList() {
                let data = {p: this.page, length: 10,oneself: 1}
                const res = await warehouseList(data)
                console.log(res)
                this.tableData = res.data.list
                this.total = res.data.total
                this.loading = false
            },
            // 区域列表
            async _getMerchList() {
                let params = {status: 1}
                const res = await getMerchList(params)
                // console.log(res)
                this.areaList = res.data.merch
            },
            // 门店列表
            async _getStoreList() {
                let params = {status: 1}
                const res = await getStoreList(params)
                // console.log(res)
                this.storeList = res.data.store
            },
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                this.loading = true
                this._warehouseList()
            },
            handleEnter(index, row) {
                console.log(row)
                this.$router.push({path: '/goods-management', query: {wid: row.id}})
            },
            add() {
                this.warehouseDialog = true
                this._getAdminList()
            },
            save() {
                console.log(this.addForm)
                this.$refs.addForm.validate( async (valid) => {
                    if (!valid) return false
                    // const res = await addWarehouse(this.addForm)
                    await addWarehouse(this.addForm)
                    this.$message.success('添加成功')
                    this.warehouseDialog = false
                    this._warehouseList()
                })
            },
            warehouseDialogClose() {
                this.$refs.addForm.resetFields()
                this.warehouseDialog = false
                this.addForm.remark = ''
            },
            async handleEdit(index, row) {
                const res = await findWarehouse({id: row.id})
                this.editForm = res.data.list
                console.log(res)
                this.editWarehouseDialog = true
            },
            editWarehouseDialogClose() {
                this.$refs.editForm.resetFields()
                this.editWarehouseDialog = false
            },
            editSave() {
                this.$refs.editForm.validate( async (valid) => {
                    if (!valid) return false
                    delete this.editForm.merch_name
                    delete this.editForm.store_name
                    // console.log(this.editForm)
                    await editWarehouse(this.editForm)
                    this.$message.success('修改成功')
                    this.editWarehouseDialog = false
                    this._warehouseList()
                })
            }
        },
        components: {
            Pagination
        },
    }
</script>

<style scoped lang="scss">
    .info {
        margin: 15px 0 20px 0;
        padding: 5px 20px;
        background-color: #E9F6FF;
        font-size: 12px;
        border-radius: 4px;
    }
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
</style>
